<template>
  <q-dialog class="dialog" v-model="show" persistent>
    <q-card style="min-width: 400px">
      <q-card-section class="dialog-title bg-primary">
        <div class="text-center text-white">{{state === 'add' ? '添加' : '编辑'}}</div>
      </q-card-section>
      <q-form @submit="submit" class="q-gutter-md dialog-content">
        <q-card-section>
          <q-input v-model="name" autofocus outlined dense
                   :rules="[val => val && val.length > 0 || '请填写名称']">
            <template v-slot:before>
              <label class="text-right name"><span class="text-red">*</span> 名称:</label>
            </template>
          </q-input>
          <div class="form-item flex">
            <span class="text-right name">图标:</span>
            <q-icon v-if="tab==='pc'" :name="'iconfont '+icon" size="xs" style="margin-left: 15px"></q-icon>
            <q-icon v-if="tab==='mobile'&&icon.length>0" :name="'img:statics/img/phone/'+icon+'.png'" size="sm" style="margin-left: 15px"></q-icon>
            <q-space/>
            <q-btn unelevated dense class="more-btn" style="background-color:#CFD6FE" :icon="showMenu?'keyboard_arrow_up':'keyboard_arrow_down'">
              <q-menu ref="iconList" anchor="bottom right" self="top right" @before-show="showMenu=true" @before-hide="showMenu=false">
                <ul class="icon-list">
                  <li v-for="(item, index) in iconList" :key="index" v-ripple:primary
                      @click="changeIcon(item)" class="icon-item relative-position" :class="{'border':tab==='pc'}">
                    <q-icon v-if="tab==='pc'" :name="'iconfont '+item" size="sm"></q-icon>
                    <q-icon v-if="tab==='mobile'" :name="'img:statics/img/phone/'+item+'.png'" size="32px"></q-icon>
                  </li>
                </ul>
              </q-menu>
            </q-btn>
          </div>
<!--          <q-input v-model="icon" outlined dense :rules="[]">-->
<!--            <template v-slot:before>-->
<!--              <label class="text-right name">图标:</label>-->
<!--            </template>-->
<!--          </q-input>-->
          <q-select v-model="type" :options="types" outlined dense :disable="state==='edit'"
                    :rules="[val => JSON.stringify(val) !== '{}' || '请选择类型']">
            <template v-slot:before>
              <label class="text-right name"><span class="text-red">*</span> 类型:</label>
            </template>
          </q-select>
          <q-input v-model="parentMenu" readonly outlined dense :rules="[]">
            <template v-slot:before>
              <label class="text-right name">上级菜单:</label>
            </template>
          </q-input>
          <q-input v-if="type.value === 1" v-model="url" outlined dense
                   :rules="[val => val && type.value === 1 && val.length > 0 || '请填写url']">
            <template v-slot:before>
              <label class="text-right name"><span class="text-red">*</span> url:</label>
            </template>
          </q-input>
        </q-card-section>
        <q-separator />
        <q-card-actions align="center" class="dialog-footer text-center margin-t-10">
          <q-btn outline color="primary" label="取消" @click="hideDialog" class="q-mr-md"/>
          <q-btn unelevated color="primary" label="确认" type="submit" :loading="submitting"/>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script>
import { iconListPC, iconListPhone } from 'src/assets/js/icon-list'
export default {
  name: 'operater',
  data () {
    return {
      show: false,
      // 分为编辑状态和添加状态 'edit' or 'add'
      state: 'edit',
      tab: 'pc',
      name: '', // 名称
      icon: '', // 图标
      type: {}, // 类型，菜单和按钮
      parentMenu: '', // 上级菜单
      parentId: '', // 上级菜单id
      url: '', // 地址
      id: null,
      submitting: false, // 提交状态
      types: [
        { label: '菜单', value: 1 },
        { label: '按钮', value: 2 }
      ],
      showMenu: false,
      iconList: []
    }
  },
  created () {
    this.type = this.types[0]
  },
  methods: {
    // 显示弹框
    showDialog (state, item, tab = 'pc') {
      this.tab = tab
      this.initInfo(state, item)
      this.show = true
    },
    // 隐藏弹框
    hideDialog () {
      this.show = false
    },
    // 初始化数据
    initInfo (state, info) {
      this.state = state
      console.log(info)
      if (info.type === 0) {
        this.types = [
          { label: '菜单', value: 1 }
        ]
      } else if (info.type > 0) {
        this.types = [
          { label: '菜单', value: 1 },
          { label: '按钮', value: 2 }
        ]
      }
      this.type = this.types[0]
      switch (this.tab) {
        case 'pc':
          this.iconList = iconListPC
          break
        case 'mobile':
          this.iconList = iconListPhone
      }
      if (state === 'edit') {
        this.name = info.name
        this.icon = info.icon
        this.type = this.types.find(item => {
          return item.value === info.type
        })
        console.log(this.type)
        this.parentMenu = info.parentName
        this.parentId = info.parentId
        this.url = info.url
        this.id = info.id
      } else {
        this.name = ''
        this.icon = ''
        this.type = this.types[0]
        this.parentMenu = info.name
        this.parentId = info.id
        this.url = ''
        this.id = null
      }
    },
    // 更换图标
    changeIcon (item) {
      this.icon = item
      this.$refs.iconList.hide()
    },
    // 提交
    submit () {
      const data = {
        name: this.name,
        icon: this.icon,
        parentId: this.parentId
      }
      if (this.state === 'edit') {
        data.id = this.id
      }
      if (this.type.value === 1) {
        data.url = this.url
      }
      this.submitting = true
      this.$emit('submit', this.state, this.type.value, data)
    }
  }
}
</script>

<style scoped lang="stylus">
  .form-item{
    align-items center
    margin-bottom 10px
    .more-btn{
      flex 32px 0
      border-radius 6px
      width 32px
      height 32px
      min-width 32px
    }
  }
  .icon-list{
    padding 10px 0 0 10px
    width 430px
    max-height 400px
    display flex
    flex-wrap wrap
    .icon-item{
      margin-right 10px
      margin-bottom 10px
      width 32px
      height 32px
      line-height 32px
      text-align center
      &.border{
        border-radius 6px
        border 1px dashed rgb(211,211,211)
      }
      &:hover{
        border 1px dashed rgb(95,119,253)
        color $primary
      }
    }
  }
</style>
